/**
 * 学习目标：使用JSX中的嵌套表达式
 * 作用：和vue的插值表达式类似，可以给标签设置内容
 * 表达式：字符串、数值、undefined、null、布尔值
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';

const name = 'zs';
const age = 18;

const divNode = (
  <>
    <div>
      <h1>
        名字：{name}, 年龄: {age}
      </h1>
      {/* 注意: undefined null 布尔值，默认在React中是不显示的 */}
      <h1>未定义: {undefined}</h1>
      <h1>未定义: {String(undefined)}</h1>
      <h1>空值: {null}</h1>
      <h1>空值: {String(null)}</h1>
      <h1>
        布尔值: {String(true)}- {String(false)}
      </h1>
    </div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
